<template>
  <div id="container3" class="container3"></div>

  <div v-if='riskVisible'>
    <risk-model v-model:visible="riskVisible"></risk-model>
  </div>

  <div v-if='cadVisible'>
    <cad-list-modal v-model:visible="cadVisible"></cad-list-modal>
  </div>
</template>

<script>
import * as echarts from "echarts";
import RiskModel from '../components/riskModel';
import CadListModal from '../components/cadListModal';

export default {
  components: {RiskModel, CadListModal},
  data() {
    return {
      riskVisible: false,
      cadVisible: false,
    }
  },
  mounted() {
    this.initEcharts()
  },
  methods: {
    initEcharts() {
      let myChart = echarts.init(document.getElementById('container3'));

      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: "{b}：{c}",
        },
        legend: {
          data: ['风险等级', '复核质量'],
          itemWidth: 0,//设置图例宽度
          itemHeight: 0,//设置图例高度
          itemGap: 100,
          padding: 30,
          textStyle: {
            fontSize: 14,//字体大小
            color: '#ffffff'//字体颜色
          }
        },
        grid: [
          {
            top: '15%',
            left: '20%',
            right: '53%',
            bottom: '20%',
            // containLabel: true
          },
          {
            top: '15%',
            left: '53%',
            right: '15%',
            bottom: '20%',
            // containLabel: true
          }
        ],
        xAxis: [
          {
            type: 'value',
            position: 'bottom',
            inverse: true,
            gridIndex: 0,
            splitLine:{ //修改背景线条样式
              show:true,//是否展示
              lineStyle:{
                color: "#979797",//线条颜色
                opacity: 0.2
              }
            },
            axisLabel: {textStyle: {color: '#979797'}},
          },
          {
            type: 'value',
            position: 'bottom',
            gridIndex: 1,
            splitLine:{ //修改背景线条样式
              show:true,//是否展示
              lineStyle:{
                color: "#979797",//线条颜色
                opacity: 0.2
              }
            },
            axisLabel: {textStyle: {color: '#979797'}},
          }
        ],
        yAxis: [
          {
            type: 'category',
            gridIndex: 0,
            axisTick: {
              show: false
            },
            data: ['重大风险', '存在风险', '关注风险'],
            axisLabel: {textStyle: {color: '#979797'}},
          },
          {
            type: 'category',
            position: 'right',
            gridIndex: 1,
            axisTick: {
              show: false
            },
            data: ['低', '中', '高'],
            axisLabel: {textStyle: {color: '#979797'}},
          }
        ],
        series: [
          {
            name: '风险等级',
            type: 'bar',
            xAxisIndex: 0,
            yAxisIndex: 0,
            barWidth: 40,
            data: [6, 11, 18],
            itemStyle: {
              color: '#5b9bd5'
            }
          },
          {
            name: '复核质量',
            type: 'bar',
            xAxisIndex: 1,
            yAxisIndex: 1,
            barWidth: 40,
            data: [3, 12, 21],
            itemStyle: {
              color: '#a9d18e'
            }
          }
        ]
      };

      myChart.setOption(option);

      myChart.getZr().on('click', (params) => {
        const clickPosition = params.offsetX;
        const chartWidth = document.getElementById('container3').clientWidth;
        const leftBoundary = chartWidth / 2;
        if (clickPosition < leftBoundary) {
          this.riskVisible = true
        } else {
          this.cadVisible = true
        }
      });
    },
  }
}
</script>

<style scoped>
.container3 {
  width: 100%;
  height: 100%;
  background-image: url("../../../assets/img/writeLine.svg");
  background-repeat: no-repeat;
  background-position: center;
}
</style>
